<template>
  <div class="container">
    <div class="title">中小企业入库申请</div>
    <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item label="企业名称:" prop="enterpriseName" >
            <el-input v-model="form.enterpriseName" placeholder="请输入企业名称" size="large"></el-input>
        </el-form-item>
        <el-form-item label="入库编号:" prop="inStorageCode">
            <el-input v-model="form.inStorageCode" placeholder="请输入入库编号" size="large"></el-input>
        </el-form-item>
        <el-form-item label="入库批次:" prop="inStorageBatch">
            <el-input v-model="form.inStorageBatch" placeholder="请输入入库批次" size="large"></el-input>
        </el-form-item>
        
    </el-form>
    <el-button type="primary" size="large" @click="submit">提交申请</el-button>
  </div>
</template>

<script setup lang="ts">

import { storageApplication, storageApplicationList } from '@/api/enterpeise';
import { getEnterpriseId } from '@/utils/storage';
import { ElMessage } from "element-plus";
import {ref,reactive,onMounted} from "vue"

// defineOptions({
//   name: ""
// })
onMounted(() => {
  const eId = getEnterpriseId();
  // 如果eId存在，则是企业人员，否则，是管理员
  if (eId) {
    storageApplicationList({ enterpriseId: eId }).then((res: any) => {
      if (res.code === 200) {
        if (res.data.total > 0) {
          ElMessage.warning('您已提交入库申请，不能再次提交');
        }
      }
    });
  } else {
    // isSubmit.value = true;
    ElMessage.warning('管理员无需提交入库申请');
  }
});
const formRef = ref(null)
const form = ref({
    enterpriseName:"",
    inStorageCode:"",
    inStorageBatch:""
})
const rules = reactive({
    enterpriseName: [
      { required: true, message: "请输入企业名称", trigger: "blur" }
    ],
    inStorageCode: [
      { required: true, message: "请输入入库编号", trigger: "blur" }
    ],
    inStorageBatch: [
      { required: true, message: "请输入入库批次", trigger: "blur" }
    ]
})

const submit = () => {
    formRef.value.validate(async valid => {
        if (valid) {
            const res = await storageApplication(form.value)
            if (res.code === 200) {
                ElMessage.success("提交成功")
            } else {
                ElMessage.error(res.msg)
            }
        } else {
            return false
        }
    })
}
</script>

<style scoped lang="scss">

.container{
    padding: 20px 100px;
    width: 100%;
    height: 50vh;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .title {
        font-size: 25px;
        text-align: center;
        font-weight: bold;
        margin-bottom: 30px;
    }
    :deep(.el-foem-label) {
        font-size: 20px;
        color: black;
        font-weight: bold;
    }
}
</style>
